@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #5a5353;
}

input,
button {
  border-style: none;
  outline: none;
}

.all {
  width: 100%;
  background-color: #2c2a2c;
}

.all .container {
  position: relative;
  width: 1200px;
  margin: auto auto;
  background-color: #f8dfe5;
}

.all .container .backTop {
  float: right;
  margin-top: 600px;
}

.all .container .backTop img {
  position: fixed;
  margin-left: 50px;
  width: 60px;
  height: 80px;
}

.all .container .backTop img:hover {
  cursor: pointer;
}

.all .container .title-header {
  background-color: rgba(92, 99, 94, 0.575);
  width: 100%;
  height: 30px;
  font-size: 13px;
  line-height: 30px;
  color: #efe0fa;
}

.all .container .title-header .location {
  float: left;
  width: 80px;
  height: 20px;
  margin-left: 90px;
  color: #efe0fa;
}

.all .container .title-header ul {
  float: right;
  display: flex;
  margin-right: 65px;
}

.all .container .title-header ul span {
  margin-left: 10px;
}

.all .container .title-header ul li {
  margin-left: 10px;
}

.all .container .title-header ul li a {
  color: #efe0fa;
}

.all .container .title-header ul li a:hover {
  color: #68646b;
  border-bottom: #342a35 1px solid;
}

.all .container .nav-container {
  width: 100%;
  height: 100px;
  line-height: 150px;
}

.all .container .nav-container img {
  float: left;
  margin-top: 15px;
  margin-left: 40px;
  width: 160px;
  height: 80px;
}

.all .container .nav-container ul {
  float: left;
  margin-top: 20px;
  margin-left: -64px;
  text-align: center;
}

.all .container .nav-container ul li {
  position: relative;
  float: left;
  width: 80px;
  height: 50px;
  margin-right: 30px;
  line-height: 53px;
}

.all .container .nav-container ul li .index {
  color: #8b0eea;
}

.all .container .nav-container ul li a {
  color: black;
}

.all .container .nav-container ul li a:hover {
  color: #8b0eea;
}

.all .container .nav-container ul li ul {
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  width: 100px;
  height: 100px;
  background-image: none;
  z-index: 99;
}

.all .container .nav-container ul li ul li {
  display: none;
}

.all .container .nav-container ul li ul lihover {
  border: none;
}

.all .container .nav-container ul li:hover {
  border-bottom: 3px #8b0eea solid;
}

.all .container .nav-container ul li:hover ul li {
  display: block;
  background-color: #ede0ee;
  /* x偏移量 | y偏移量 | 阴影颜色 */
  /* x偏移量 | y偏移量 | 阴影颜色 */
  /* 任意数量的阴影，以逗号分隔 */
  box-shadow: 3px 3px #ece0e0, 0em 0 0.4em #ece8eb;
}

.all .container .nav-container .search-container {
  float: left;
  display: inline-block;
  width: 255px;
  height: 32px;
  padding-top: 2px;
  margin-top: 30px;
  margin-left: 30px;
  border: #43384b 2px dotted;
  border-radius: 20px 20px;
}

.all .container .nav-container .search-container input {
  float: left;
  width: 210px;
  height: 30px;
  margin-left: 10px;
  background-color: #f8dfe5;
}

.all .container .nav-container .search-container button {
  float: left;
  width: 30px;
  height: 30px;
  margin-left: -40px;
  background-color: #f8dfe5;
}

.all .container .nav-container .search-container button img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.all .container .nav-container .search-container button img:hover {
  cursor: pointer;
  background-color: #f8f1f8;
}

.all .detail-wrapper {
  width: 1000px;
  display: flex;
  margin: 50px auto;
  border: thistle 2px solid;
}

.all .detail-wrapper .contain {
  width: 800px;
  margin: 30px auto;
  display: flex;
}

.all .detail-wrapper .contain .wraper-l {
  margin-right: 20px;
}

.all .detail-wrapper .contain .wraper-l .add-cart {
  display: inline-block;
  width: 80px;
  height: 30px;
  margin-bottom: 20px;
  margin-left: 70px;
  background-color: #d6eea9;
  cursor: pointer;
  color: #5b575e;
}

.all .detail-wrapper .contain .wraper-l .add-cart:hover {
  color: #eb44a0;
}

.all .detail-wrapper .contain .wraper-l .look-cart {
  display: inline-block;
  width: 80px;
  height: 30px;
  margin-bottom: 20px;
  margin-left: 40px;
  background-color: #d6eea9;
  cursor: pointer;
}

.all .detail-wrapper .contain .wraper-l .look-cart:hover {
  color: #eb44a0;
}

.all .detail-wrapper .contain .wraper-l ul {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.all .detail-wrapper .contain .wraper-l ul .active {
  border: orangered 2px solid;
}

.all .detail-wrapper .contain .wraper-l ul li {
  margin-right: 10px;
}

.all .detail-wrapper .contain .wraper-l ul li img {
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.all .detail-wrapper .contain .wraper-l .show-box {
  position: relative;
  width: 350px;
  height: 350px;
  padding-left: 20px;
}

.all .detail-wrapper .contain .wraper-l .show-box img {
  margin-top: 0;
  width: 350px;
  height: 350px;
}

.all .detail-wrapper .contain .wraper-l .show-box .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  background-color: rgba(250, 250, 223, 0.4);
  pointer-events: none;
  display: none;
  cursor: pointer;
}

.all .detail-wrapper .contain .wraper-r {
  position: absolute;
  left: 500px;
  top: 400px;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.all .detail-wrapper .contain .wraper-r img {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.all .detail-wrapper .detail-r {
  position: relative;
  margin-top: 30px;
  margin-left: -250px;
}

.all .detail-wrapper .detail-r .title {
  width: 600px;
}

.all .detail-wrapper .detail-r .title h2 {
  font-size: 20px;
  color: #70676c;
  font-weight: 700;
}

.all .detail-wrapper .detail-r .title .pricenow {
  display: inline-block;
  float: left;
  width: 100px;
  height: 30px;
  margin-top: 20px;
  background-color: #f3a7d6;
  border-radius: 13% 13%;
  text-align: center;
  line-height: 30px;
}

.all .detail-wrapper .detail-r .title .priceago {
  display: inline-block;
  float: left;
  margin-right: 10px;
  width: 150px;
  height: 30px;
  margin-top: 20px;
  background-color: #f7c3ea;
  border-radius: 13% 13%;
  text-align: center;
  line-height: 30px;
  text-decoration: line-through #69565c;
}

.all .detail-wrapper .detail-r img {
  top: 0;
  left: 0;
  display: none;
}
